<template>
	<view style="height: 100vh; background-color: #fff;">
		<view class="choose-box">
			<view class="choose">
				<view class="title">
					 <text>[{{questionsObj.type == 0 ? '选择题' : questionsObj.type == 1 ? '判断题' : '多选题'}}]</text>{{questionsObj.serialNumber}}. {{questionsObj.content}}
				</view>
				<view class="content" v-if="questionsObj.type == 2">
					<view class="xz" v-for="(itemChoose,indexChoose) in questionsObj.objArr" :key="indexChoose">
						<text v-if="!itemChoose.flag && !itemChoose.error">{{itemChoose.value.slice(0,1)}}</text>
						<u-icon v-if="!itemChoose.flag && itemChoose.error" name="close-circle-fill" color="#FA0606" size="46" style="vertical-align: middle; margin-right: 20rpx;"></u-icon>
						<u-icon v-if="itemChoose.flag" name="checkmark-circle-fill" color="#62D528" size="46" style="vertical-align: middle; margin-right: 20rpx;"></u-icon>
						{{itemChoose.value.slice(1,itemChoose.value.length)}}
					</view>
				</view>
				<view class="content" v-else>
					<view class="xz" v-for="(itemChoose,indexChoose) in questionsObj.objArr" :key="indexChoose">
						<text v-if="itemChoose.value.slice(0,1) != questionsObj.userAnswer && itemChoose.value.slice(0,1) != questionsObj.answer">{{itemChoose.value.slice(0,1)}}</text>
						<u-icon v-if="itemChoose.value.slice(0,1) == questionsObj.userAnswer && itemChoose.value.slice(0,1) != questionsObj.answer" name="close-circle-fill" color="#FA0606" size="46" style="vertical-align: middle; margin-right: 20rpx;"></u-icon>
						<u-icon v-if="itemChoose.value.slice(0,1) == questionsObj.answer" name="checkmark-circle-fill" color="#62D528" size="46" style="vertical-align: middle; margin-right: 20rpx;"></u-icon>
						{{itemChoose.value.slice(1,itemChoose.value.length)}}
					</view>
				</view>
			</view>
		</view>
		<view class="choose-box">
			<view class="answer">
				答案 {{questionsObj.answer}}
			</view>
			<view class="answer" style="margin-top: 20rpx;">
				解析
			</view>
			<view class="answer answer-box" style="margin-top: 20rpx;">
				{{questionsObj.answerExplain ? questionsObj.answerExplain : ''}}
			</view>
		</view>
	</view>
</template>

<script>
	import {exams,examsUnfinishedExam,examsAnswer,examsScore} from '../../api/api.js'
	export default {
		data() {
			return {
				customStyleButton:{
					marginTop:'80rpx',
					backgroundColor:'#F18B3A',
					borderRadius: '12rpx',
					height: '88rpx'
				},
				questionsObj:{}
			}
		},
		onLoad(query){
			let item = JSON.parse(query.item),zimu = ['A','B','C','D']
			item.answerArr = item.answer.split('')
			item.userAnswerArr = item.userAnswer.split('')
			item.optionsArr = item.options.split(',')
			item.objArr = []
			item.optionsArr.forEach((b,index)=>{
				let obj = {
					flag: false,
					value: '',
					error:false
				}
				if(index == 0){
					obj.value = `A` + b
					obj.flag = item.answerArr.includes('A')
					obj.error = item.userAnswerArr.includes('A')
				}else if(index == 1){
					obj.value = `B` + b
					obj.flag = item.answerArr.includes('B')
					obj.error = item.userAnswerArr.includes('B')
				}else if(index == 2){
					obj.value = `C` + b
					obj.flag = item.answerArr.includes('C')
					obj.error = item.userAnswerArr.includes('C')
				}else{
					obj.value = `D` + b
					obj.flag = item.answerArr.includes('D')
					obj.error = item.userAnswerArr.includes('D')
				}
				item.objArr.push(obj)
			})
			this.questionsObj = item
		},
		mounted() {
			
		},
		methods: {
			
			// 获取本人未结束的考试
			getExams(){
				exams().then(resp=>{
					resp.questions.forEach(e=>{
						e.flag = false
						e.optionsArr = e.options.split(',')
						e.objArr = []
						e.optionsArr.forEach(b=>{
							let obj = {
								flag: false,
								value: ''
							}
							obj.value = b
							e.objArr.push(obj)
						})
					})
					this.questionsObj = resp
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.choose-box{
	border-top: solid 20rpx #f0f0f0;
	padding: 30rpx;
	.choose{
		.title{
			color: #000;
			font-size: 36rpx;
			text{
				color: #F18B3A;
			}
		}
		.content{
			margin-top: 20rpx;
			.xz{
				font-size: 34rpx;
				min-height: 60rpx;
				line-height: 60rpx;
				text{
					font-size: 32rpx;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 38rpx;
					border: 2rpx solid rgba(192, 171, 171, 0.45);
					border-radius: 50%;
					display: inline-block;
					margin-right: 20rpx;
				}
			}
		}
	}
	.answer{
		height: 40rpx;
		line-height: 40rpx;
		border-left: solid 6rpx #F18B3A;
		padding-left: 20rpx;
		font-weight: 600;
		font-size: 32rpx;
	}
	.answer-box{
		border:none;
		padding-left: 0;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 50rpx;
	}
}
</style>
